import React, { Component } from 'react'

import BP from './BP'

export default class LOLm extends Component {
    constructor(){
        super();
        this.state = {
            num:1,
            heroList: [
                {name: 'yasuo', id:1},
                {name: 'js', id:2},
                {name: 'vn', id:3},
                {name: 'mao', id:4},
                {name: 'gailun', id:5},
            ],
            // 禁用的英雄
            banHero: {},
            // 选用的英雄
            pickHero: {},
        }
    }
    ban(index){
        console.log(this.state.heroList[index]);
        this.setState({
            banHero: this.state.heroList[index],
            num: this.state.num +1
        },()=>{
            console.log(this.state.num);
        })
    }
    pick(index){
        this.setState({
            pickHero: this.state.heroList[index]
        })
    }
    render() {
        return (
            <div>
                <BP 
                    list={this.state.heroList}
                    ban= {(index) => this.ban(index)}
                    pick= {(index) => this.pick(index)}
                ></BP>
                <hr/>
                <p>已禁用: {this.state.banHero.name}</p>
                <p>已选用: {this.state.pickHero.name}</p>
            </div>
        )
    }
}
